<template>
    <div>
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree @node-click="nodeClick" ref="menuTree" :data="menus" node-key="catId" :props="defaultProps"
            :filter-node-method="filterNode" :highlight-current="true">
        </el-tree>
    </div>

</template>
<script>
export default {
    data() {
        return {
            menus: [],
            expandedKey: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            }
        };
    },
    watch: {
        filterText(val) {
            this.$refs.menuTree.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        getMenus() {
            this.$http({
                url: this.$http.adornUrl('/product/category/list/tree'),
                method: 'get'
            }).then(({ data: { data: realData } }) => {
                this.menus = realData
            })
        },
        nodeClick(data, node, component) {
            this.$emit('tree-node-click', data, node, component)
        }
    },
    created() {
        this.getMenus()
    },
    mounted() {

    }
}
</script>
<style scoped></style>